<template>
  <div class="container-second" :style="{'background-color': resData.backgroundColor, backgroundImage: 'url(' + resData.backgroundPicUrl + ')'}">
    <template v-if="!getCustomerId">
      <get-user-info v-if="isGetUserInfo"  @authPhoneInfo="authPhoneInfo"></get-user-info>
      <get-phone-info v-if="isGetPhoneInfo"></get-phone-info>
    </template>
    <template v-if="getCustomerId && !getPhone">
      <get-phone-info v-if="isGetPhoneInfo"></get-phone-info>
    </template>
    <div class="module-box">
      <second-page @userInfo="userInfo" :content="detailsList" :enterpriceId="getEnterpriseId" @countdowmFinish="countDownFinish"
        ></second-page>
    </div>
  </div>
</template>
<script>
import secondPage from '@/components/CustomRichText/secondPage'
import GetUserInfo from '@/components/GetUserInfo'
import GetPhoneInfo from '@/components/GetPhoneInfo'
import { getCustomPage } from '@/api/home'
export default {
  components: { secondPage, GetUserInfo, GetPhoneInfo },
  data() {
    return {
      detailsList: [],
      resData: {},
      pageId: null,
      isGetUserInfo: false,
      isGetPhoneInfo: false,
      navList: []
    }
  },
  onTabItemTap(item) {
    this.navList = this.$pt.getStorageSync('navList')
    this.pageId = this.navList[item.index].linkObj.pageId
    // if (item.pagePath === 'pages/home/second-custom-nav/main') {
    //   const accountInfo = this.$pt.getAccountInfoSync()
    //   if (accountInfo.miniProgram.appId === 'wx8feb0e04fe336136') {
    //     this.pageId = '1331500057365721089'
    //   }
    // }
  },
  mounted() {
    // 设置同个自定义页面，多次进入，存储每次自定义页面ID
    let getSecondPageID = this.$pt.getStorageSync('secondPage') ? this.$pt.getStorageSync('secondPage') : []
    let pageId = this.pageId
    getSecondPageID.push(pageId)
    this.$pt.setStorageSync('secondPage', getSecondPageID)
    if (this.getCurrentPage().query.pageId) {
      this.pageId = this.getCurrentPage().query.pageId
    }
    this.getCustomPage()
  },
  onUnload() {
    // 同个自定义页面，多次进入，当返回上个页面时，获取自定义页面ID，并存储
    let getSecondPageID = this.$pt.getStorageSync('secondPage')
    if (getSecondPageID.length > 1) {
      this.resData = {}
      this.detailsList = []
      let len = getSecondPageID.length - 1
      getSecondPageID.splice(len, 1)
      this.$pt.setStorageSync('secondPage', getSecondPageID)
      this.pageId = getSecondPageID[getSecondPageID.length - 1]
      this.getCustomPage()
    }
  },
  onPullDownRefresh() {
    // 下拉刷新
    this.$pt.pageScrollTo({
      scrollTop: 0,
      duration: 0
    })
    this.getCustomPage()
    setTimeout(() => {
      this.$pt.stopPullDownRefresh()
    }, 500)
  },
  onShareAppMessage() {
    // 分享名片埋点
    this.$pt.setStorageSync('chooseLocation', true)
    if (this.resData) {
      return {
        title: this.resData.shareTitle,
        path: 'pages/home/second-custom/main?pageId=' + this.pageId,
        imageUrl: this.resData.sharePicUrl
      }
    } else {
      return {
        title: '',
        path: 'pages/home/second-custom/main?pageId=' + this.pageId,
        imageUrl: this.fileSpace + '/images/share-s-picture.png'
      }
    }
  },
  methods: {
    countDownFinish() {
      this.getCustomPage()
    },
    getCustomPage() {
      this.resData = {}
      this.detailsList = []
      let params = {
        pageId: this.pageId,
        memberId: this.getMemberId,
        customerId: this.getCustomerId,
        enterpriseId: this.getEnterpriseId ? this.getEnterpriseId : ''
      }
      // if (!this.getCustomerId) return
      getCustomPage(params).then(response => {
        if (response.isError) return
        this.resData = response.data
        this.detailsList = response.data.detailsList
        setTimeout(() => {
          this.$pt.hideToast()
          // 设置页面标题
          this.$pt.setNavigationBarTitle({
            title: this.resData.mpPageTitle ? this.resData.mpPageTitle : ''
          })
          this.$pt.setNavigationBarColor({
            frontColor: this.resData.titleFontColor ? this.resData.titleFontColor : '',
            backgroundColor: this.resData.titleBackgroundColor ? this.resData.titleBackgroundColor : ''
          })
        }, 600)
      })
    },
    userInfo(res) {
      if (!this.getCustomerId) {
        this.isGetUserInfo = res
      } else if (!this.getPhone) {
        this.isGetPhoneInfo = true
      }
    },
    // 头像昵称 授权后 立即跳出手机号授权
    authPhoneInfo() {
      this.isGetPhoneInfo = true
    }
  }
}
</script>
<style lang="less" scoped>
.container-second{
  background-color: #fff;
  min-height: 100vh;
  background-size: 100%;
  background-repeat: no-repeat;
}
.module-box{  
  .title-bar{
    h2{
      margin: 0;
      padding: 0;
    }
  }
  .timer{
    .timer-t{
      color: #818181;
    }
  }
  ul{
    padding: 0;
    margin: 0; 
    &:after{
      content: '';
      display: block;
      clear: both;
      font-size: 0;
    }       
    &.show-type-1{
      li{
        &:last-child{
          margin-bottom: 0;
        }
        .detail-box{
          padding: 12px 12px 8px 12px;
        }
        .gooods-pic{
          img{
            width: 100%;
            height: 190px;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
          }
          &.pos-rel{
            &.del-show{
              .del-layer-bg{
                border-top-left-radius: 4px;
                border-top-right-radius: 4px;
              }
              .del-layer{
                &.stock-none{
                  label{
                    margin-top: 12%;
                  }
                }
                label{
                  width: 100px;
                  height: 100px;
                  line-height: 100px;
                  font-size: 24px;
                  margin-top: 8%;
                }
                p{
                  font-size: 15px;
                  margin-top: 3%;
                }
              }
            }
          }
        }
      }
    }
    &.show-type-2{
      li{
        width: 48%;
        float: left;
        &:nth-child(odd){
          margin-right: 4%;
        }
        .detail-box{
          padding: 8px 10px 5px 10px;
        }
        .desc{
          margin-bottom: 8px!important;
        }
        .gooods-pic{
          img{
            width: 100%;
            height: 160px;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
          }
          &.pos-rel{
            &.del-show{
              .del-layer-bg{
                border-top-left-radius: 4px;
                border-top-right-radius: 4px;
              }
              .del-layer{
                &.stock-none{
                  label{
                    margin-top: 26%;
                  }
                }
                label{
                  width: 70px;
                  height: 70px;
                  line-height: 70px;
                  font-size: 16px;
                  margin-top: 18%;
                }
                p{
                  font-size: 12px;
                  margin-top: 6%;
                }
              }
            }
          }
        }
        .buy-now-type{
          display: none;
        }
        .height-s-item{
          height: 19px;
          margin-bottom: -1px; 
        }
        .price{
          .label-s{
            display: none;              
          }
        }
        button.remove-type{
          font-size: 10px;
          padding: 4px 6px;
          margin-right: -4px;
        }
        .info-bar{
          .remove-type{
            display: none!important;
          }
        }
        .line-item.remove-type{
          display: inline-block!important;
        }
        .last-item.remove-type{
          display: none!important;
        }
      }
    }
    &.show-type-3{
      li{
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        flex-flow: row;
        align-items: center;
        padding: 10px 10px;
        &:last-child{
          margin-bottom: 0;
        }
        .pic-box{
          margin-right: 6px;
          .gooods-pic{
            img{
              width: 100px;
              height: 100px;
            }
            &.pos-rel{
              &.del-show{
                .del-layer{
                  &.stock-none{
                    label{
                      margin-top: 22%;
                    }
                  }
                  label{
                    width: 50px;
                    height: 50px;
                    line-height: 50px;
                    margin-top: 14%;
                    font-size: 13px;
                  }
                  p{
                    font-size: 10px;
                    margin-top: 5%;
                  }
                }
              }
            }
          }
        }
        .detail-box{
          padding: 0px 2px 0px 7px;
          -webkit-box-flex: 1;
          -webkit-flex: 1;
          flex: 1;
        }
        .tag{
          span{
            padding: 1px 5px!important;
          }
        }
        .price{
          .label-s{
            display: none;
          }
        }
        .stock{
          display: none;
        }
        .info-bar{
          &.true{
            .buy-now-type{
              display: none!important;
            }
          }
          .remove-type.line-item{
            display: none!important;
          }
          .remove-type{
            display: block!important;
          }            
        }            
        .last-item{
          display: none!important;
        }
      }
    }
    &.show-type-4{
      li{
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        flex-flow: row;
        align-items: center;
        padding: 10px 10px;
        &:last-child{
          margin-bottom: 0;
        }
        &:nth-child(even){
          .pic-box{
            &.even{
              display: none;
            }
            &.odd{
              display: block;
              margin-right: 0;
              margin-left: 14px;
            }                
          }
        }
        &:nth-child(odd){
          .pic-box{
            &.even{
              display: block;                
            }
            &.odd{
              display: none;
            }
          }
        }
        .desc{
          margin-bottom: 6px!important;
        }
        .pic-box{
          margin-right: 14px;              
          .gooods-pic{
            img{
              width: 122px;
              height: 122px;
            }
            &.pos-rel{
              &.del-show{
                .del-layer{
                  &.stock-none{
                    label{
                      margin-top: 26%;
                    }
                  }
                  label{
                    width: 50px;
                    height: 50px;
                    line-height: 50px;
                    margin-top: 20%;
                    font-size: 13px;
                  }
                  p{
                    font-size: 10px;
                    margin-top: 5%;
                  }
                }
              }
            }
          }
        }
        .detail-box{
          -webkit-box-flex: 1;
          -webkit-flex: 1;
          flex: 1;
          padding: 0px!important;
        }
        .desc{
          margin-bottom: 13px;
        }
        .tag{
          margin-top: -1px;
          margin-bottom: -2px;
          span{
            padding: 1px 5px!important;
          }
        }
        .price{
          .flex-item{
            .label-f{
              display: flex;
              flex-flow: row;
              align-items: center;
              margin-left: 0;
            }
            .tag-xs-t{
              color: #292929;
              display: inline-block;
              vertical-align: bottom;
              margin-bottom: -2px;
            }
            .label-s{
              display: -webkit-box;
              display: -webkit-flex;
              display: flex;
              margin-top: -6px;
              margin-left: -2px;
            }
          }
        }
        .stock{
          display: none;
        }
        .info-bar{
          .remove-type{
            display: none!important;
          }
          .buy-now-type{
            display: none!important;
          }
        }            
        .last-item{
          display: inline-block!important;
          margin-top: 5px;
        }
      }
    }
    li{
      list-style-type: none;
      border-radius: 4px;
      box-shadow: 0 4px 9px rgba(133, 133, 133, 0.2);
      margin-bottom: 13px;        
      .detail-box{
        padding: 12px;
      }
      .buy-now-type{
        background: #fed806!important;
        border: #fed806 1px solid!important;
        padding: 4px 9px;
        line-height: normal;
        color: #333!important;
        &:after{
          display: none;
        }
      }
      .remove-type{
        background: #292929!important;
        border: #292929 1px solid!important;
        padding: 4px 9px;
        line-height: normal;
        color: #fff!important;
        &:after{
          display: none;
        }
      }
      .pic-box{
        &.odd{
          display: none;
        }
      }
      .gooods-pic{
        &.pos-rel{
          &.del-show{
            .del-layer-bg{
              display: block;
              position: absolute;
              left: 0;
              top: 0;
              width: 100%;
              height: 100%;
              background: rgba(0, 0, 0, 0.7);
              z-index: 10;
            }
            .del-layer{
              position: absolute;
              left: 0;
              top: 0;
              width: 100%;
              height: 100%;
              z-index: 11;
              text-align: center;
              color: #fff;
              display: block;
              &.stock-none{
                label{
                  margin-top: 18%;
                }
              }
              label{
                width: 50px;
                height: 50px;
                line-height: 50px;
                margin-top: 15%;
                font-size: 13px;                  
                background: rgba(0, 0, 0, 0.7);
                border: rgba(255, 255, 255, 0.7) 1px solid;
                border-radius: 100px;            
                display: inline-block;
              }
              p{
                display: block;
                font-size: 10px;
                margin-top: 5%;
              }
            }
          }
        }
        img{
          display: block;
        }
      }        
      .desc{
        height: 37px;
        line-height: 1.3;
        overflow:hidden;
        color: #595959;
        text-overflow:ellipsis;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        word-break:break-word;
      }
      .line-item{
        display: none;
      }
      .last-item{
        display: none;
      }
      .info-bar{
        >button{
          margin-bottom: 3px;
        }
        .tag{
          line-height: 1.3;
          .label-f{
            background: #fed807;
            color: #333;
            padding: 2px 5px;
          }
          .label-s{
            background: #272727;
            color: #fff;
            padding: 2px 5px;
            min-width: 60px;
            box-sizing: border-box;
            span{
              color: #ffc81b;
              font-style: normal;
              &.income-label{
                padding: 0!important;
              }
            }
          }
        }
        .price{
          .tag-xs-t{
            display: none;
          }
          .label-f{
            color: #ff0000;
          }
          .label-s{
            color: #292929;
            text-decoration: line-through;
          }
        }
        .stock{
          color: #818181;
        }
        label{
          font-weight: normal;
        }
      }
    }
  }
}
</style>
